<template>
  <el-cascader-panel
    ref="panelRef"
    class="cascader-panel-container"
    v-model="panelValue"
    size="mini"
    :props="panelProps"
    :options="options"
    @change="handleNodeChange"
  />
</template>
<script>
export default {
  props: {
    // 面板属性
    panelProps: {
      type: Object,
      default: () => ({}),
    },
    // 面板选项集合
    options: {
      type: Array,
      default: () => [],
    },
  },
  data () {
    return {
      panelValue: [], // 选中的节点
    }
  },
  methods: {
    // 选中节点
    handleNodeChange () {
      const curNodes = this.$refs.panelRef.getCheckedNodes() ?? []
      const curData = curNodes[0]?.data ?? {}
      this.$emit('change', curData)
    },
  },
}
</script>
<style lang="less" scoped>
.cascader-panel-container {
  display: flex;
  height: 400px;
  /deep/ .el-cascader-menu {
    width: 50%;
  }
}
</style>
